<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路面勘测</title>
  <!-- 重置样式，使得各浏览器样式更一致 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <!-- vant样式 -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" />
  <!-- 自定义样式 -->
  <link rel="stylesheet" href="./style/common.css" />
</head>

<body>
  <div id="app" class="road-survey">
    <div id="container" style="width: 100px; height: 100px; position: absolute; z-index: -10;"></div>
    <!-- 信息录入 -->
    <template v-if="activeTabbar === 0">
      <div class="road-survey-header">
        <van-tabs v-model:active="activeTab">
          <van-tab v-for="item in headerList" :title="item.value">
          </van-tab>
        </van-tabs>
      </div>
      <!-- 基础信息填写页面 -->
      <template v-if="activeTab === 0">
        <div class="road-survey-direction">
          <van-cell-group inset>
            <van-field label="勘察时间" v-model="baseMsg.time" input-align="right">
              <template #button>
                <van-button size="mini" @click="handleGetTime">更新</van-button>
              </template>
            </van-field>
            <van-field label="记录人" v-model="baseMsg.user" placeholder="请输入记录人" input-align="right"></van-field>
            <van-cell title="路口名称" placeholder="请输入路口名称" title-class="cell-title">
              <van-field v-model="baseMsg.roadName" placeholder="xxx" input-align="right"></van-field>
            </van-cell>
            <van-field label="路口经纬度" v-model="baseMsg.roadPosition" placeholder="请输入路口经纬度" input-align="right">
              <template #button>
                <van-button size="mini" @click="getCurrentLocation(true)" :loading="positionLoading">获取</van-button>
              </template>
            </van-field>
            <van-cell title="点位形状" title-class="cell-title">
              <van-radio-group v-model="baseMsg.roadShape" direction="horizontal">
                <van-radio :name="road.key" icon-size="18px" v-for="road in ROAD_SHAPE">
                  <template v-if="road.showInput && baseMsg.roadShape === road.key">
                    <van-field :label="road.value" v-model="baseMsg.roadShapeExt" input-align="left">
                    </van-field>
                  </template>
                  <template v-else>
                    {{road.value}}
                  </template>
                </van-radio>
              </van-radio-group>
            </van-cell>
            <van-cell title="点位属性" title-class="cell-title">
              <van-radio-group v-model="baseMsg.dotType" direction="horizontal">
                <van-radio :name="dot.key" icon-size="18px" v-for="dot in DOT_TYPE">{{dot.value}}</van-radio>
              </van-radio-group>
            </van-cell>
            <van-cell title="信号机品牌" title-class="cell-title">
              <van-radio-group v-model="baseMsg.signalType" direction="horizontal">
                <van-radio :name="signal.key" icon-size="18px" v-for="signal in SIGNAL_TYPE">
                  <template v-if="signal.showInput && baseMsg.signalType === signal.key">
                    <van-field :label="signal.value" v-model="baseMsg.signalTypeExt" input-align="left">
                    </van-field>
                  </template>
                  <template v-else>
                    {{signal.value}}
                  </template>
                </van-radio>
              </van-radio-group>
            </van-cell>
            <van-cell title="周围建筑物" title-class="cell-title">
              <van-checkbox-group v-model="baseMsg.aroundBuilding" shape="square" class="small-label">
                <van-checkbox :name="around.key" icon-size="18px" :label-disabled="true"
                  v-for="around in AROUND_BUILDING">
                  <template v-if="around.showInput && baseMsg.aroundBuilding.includes(around.key)">
                    <van-field :label="around.value" v-model="baseMsg.aroundBuildingExt" input-align="left">
                    </van-field>
                  </template>
                  <template v-else>
                    {{around.value}}
                  </template>
                </van-checkbox>
              </van-checkbox-group>
            </van-cell>
          </van-cell-group>
        </div>
      </template>
      <template v-else>
        <div class="road-survey-direction" v-if="directionMsg.length">
          <div class="direction-left">
            <van-sidebar v-model="directionMsg[activeTab - 1].current">
              <van-sidebar-item v-for="item in DIRECTION_CONFIG" :title="item.value" :key="item.key"></van-sidebar-item>
            </van-sidebar>
          </div>
          <div class="direction-right">
            <van-cell-group>
              <template v-for="item in currentDirChild.child" :key="item.key">
                <!-- 车道特殊处理 -->
                <template v-if="item.key==='motorwayNumber'">
                  <van-cell :title="item.value" title-class="cell-title">
                    <van-radio-group>
                      <van-stepper v-model="currentDirItem.motorwayNumber" @plus="handleChangeMotNumber(1)"
                        @minus="handleChangeMotNumber(-1)"></van-stepper>
                    </van-radio-group>
                  </van-cell>
                  <template v-for="(road, index) in currentDirItem.motorwayList">
                    <van-cell :title="'车道' + (index + 1)">
                    </van-cell>
                    <van-steps direction="vertical" :active="4">
                      <van-step>
                        <van-field label="车道宽度" v-model="road.width" type="number" input-align="right">
                          <template #button>米</template>
                        </van-field>
                      </van-step>
                      <van-step>
                        <van-field label="转向" readonly input-align="right"></van-field>
                        <div class="direction-img-content">
                          <div v-for="item in DIRECTION_IMAGE" :key="item.key"
                            @click="handleChangeDirection(item, road)"
                            :class="['direction-img-item', {'active': road.direction.includes(item.key)}]">
                            <img
                              :src="`./images/${road.direction.includes(item.key) ? 'active-' : ''}${item.value}.png`" />
                          </div>
                        </div>
                      </van-step>
                    </van-steps>
                  </template>
                </template>
                <!-- radio类型的综合 -->
                <template v-else-if="item.type===CONTENT_TYPE.RADIO">
                  <!-- 无title时，将标题宽度设置为0 -->
                  <van-cell :title="item.value" :title-class="item.value ? 'cell-title' : 'none-title'">
                    <van-radio-group v-model="currentDirItem[item.key]" class="flex-end">
                      <van-radio :name="road.key" icon-size="18px" v-for="road in item.option">
                        <template v-if="road.showInput && currentDirItem[item.key] === road.key">
                          <van-field :label="road.value" v-model="currentDirItem[item.key + 'Ext']" input-align="left">
                          </van-field>
                        </template>
                        <template v-else>
                          {{road.value}}
                        </template>
                      </van-radio>
                    </van-radio-group>
                  </van-cell>
                </template>
                <template v-else-if="item.type===CONTENT_TYPE.CHECKBOX">
                  <van-cell :title="item.value" :title-class="item.value ? 'cell-title' : 'none-title'">
                    <van-checkbox-group v-model="currentDirItem[item.key]" shape="square">
                      <van-checkbox :name="around.key" icon-size="18px" :label-disabled="true"
                        v-for="around in item.option">
                        <template v-if="around.showInput && currentDirItem[item.key].includes(around.key)">
                          <van-field :label="around.value" v-model="currentDirItem[item.key + 'Ext']"
                            input-align="left">
                          </van-field>
                        </template>
                        <template v-else>
                          {{around.value}}
                        </template>
                      </van-checkbox>
                    </van-checkbox-group>
                  </van-cell>
                </template>
                <template v-else>
                  <van-field :label="item.value" v-model="currentDirItem[item.key]" :placeholder="`请输入`"
                    :input-align="item.value ? 'right': 'left'" :type="item.inputType || 'number'" rows="5"
                    autosize></van-field>
                </template>
              </template>
            </van-cell-group>
          </div>
        </div>
      </template>
    </template>
    <!-- 核对界面 -->
    <template v-if="activeTabbar === 1">
      <div class="road-survey-view">
        <div class="road-survey-view-content">
          <table style="width: 100%;" :style="scaleTable">
            <tr class="center">
              <th :colspan="4 + (headerList.length > 2 ? headerList.length - 3 : 0)">路口现场勘察记录表</th>
            </tr>
            <tr class="center">
              <th>勘查时间</th>
              <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">{{baseMsg.time}}</td>
              <th>记录人</th>
              <td>{{baseMsg.user}}</td>
            </tr>
            <tr class="center">
              <th>路口名称</th>
              <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">
                {{baseMsg.roadName}}</td>
              <th>路口经纬度</th>
              <td>{{baseMsg.roadPosition}}</td>
            </tr>
            <tr class="center">
              <th>点位形状</th>
              <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">
                <van-radio-group v-model="baseMsg.roadShape" direction="horizontal">
                  <van-radio :name="road.key" icon-size="18px" v-for="road in ROAD_SHAPE">
                    <template v-if="road.showInput && baseMsg.roadShape === road.key">
                      <van-field :label="road.value" v-model="baseMsg.roadShapeExt" input-align="left">
                      </van-field>
                    </template>
                    <template v-else>
                      {{road.value}}
                    </template>
                  </van-radio>
                </van-radio-group>
              </td>
              <th>点位属性</th>
              <td>
                <van-radio-group v-model="baseMsg.dotType" direction="horizontal">
                  <van-radio :name="dot.key" icon-size="18px" v-for="dot in DOT_TYPE">{{dot.value}}</van-radio>
                </van-radio-group>
              </td>
            </tr>
            <tr class="center">
              <th>信号机品牌</th>
              <td :colspan="3 + (headerList.length > 2 ? headerList.length - 3 : 0)">
                <van-radio-group v-model="baseMsg.signalType" direction="horizontal">
                  <van-radio :name="signal.key" icon-size="18px" v-for="signal in SIGNAL_TYPE">
                    <template v-if="signal.showInput && baseMsg.signalType === signal.key">
                      <van-field :label="signal.value" v-model="baseMsg.signalTypeExt" input-align="left">
                      </van-field>
                    </template>
                    <template v-else>
                      {{signal.value}}
                    </template>
                  </van-radio>
                </van-radio-group>
              </td>
            </tr>
            <tr v-if="headerList.length > 1">
              <th colspan="2">方向</th>
              <template v-for="item in headerList.slice(1)">
                <th>{{item.value}}</th>
              </template>
            </tr>
            <template v-for="item in DIRECTION_CONFIG">
              <tr v-for="(child, index) in item.child">
                <th :rowspan="item.child.length" v-if="index === 0" :colSpan="item.child.length === 1 ? 2 : 1">
                  {{item.value}}</th>
                <th v-if="item.child.length !== 1">{{child.value}}</th>
                <template v-for="dirItem in directionMsg">
                  <td>
                    <template v-if="child.key==='motorwayNumber'">
                      <template v-for="(road, index) in dirItem.motorwayList">
                        <div class="common-title">
                          车道{{index + 1}}
                        </div>
                        <div>
                          宽度: {{road.width}}米
                        </div>
                        <div class="direction-img-content">
                          <div v-for="item in DIRECTION_IMAGE" :key="item.key"
                            @click="handleChangeDirection(item, road)"
                            :class="['direction-img-item direction-img-table-item', {'active': road.direction.includes(item.key)}]">
                            <img
                              :src="`./images/${road.direction.includes(item.key) ? 'active-' : ''}${item.value}.png`" />
                          </div>
                        </div>
                      </template>
                    </template>
                    <template v-else-if="child.type===CONTENT_TYPE.RADIO">
                      <van-radio-group v-model="dirItem[child.key]">
                        <van-radio :name="road.key" icon-size="18px" v-for="road in child.option">
                          <template v-if="road.showInput && dirItem[child.key] === road.key">
                            <van-field :label="road.value" v-model="dirItem[child.key + 'Ext']" input-align="left">
                            </van-field>
                          </template>
                          <template v-else>
                            {{road.value}}
                          </template>
                        </van-radio>
                      </van-radio-group>
                    </template>
                    <template v-else-if="child.type===CONTENT_TYPE.CHECKBOX">
                      <van-checkbox-group v-model="dirItem[child.key]" shape="square">
                        <van-checkbox :name="around.key" icon-size="18px" :label-disabled="true"
                          v-for="around in child.option">
                          <template v-if="around.showInput && dirItem[child.key].includes(around.key)">
                            <van-field :label="around.value" v-model="dirItem[child.key + 'Ext']" input-align="left">
                            </van-field>
                          </template>
                          <template v-else>
                            {{around.value}}
                          </template>
                        </van-checkbox>
                      </van-checkbox-group>
                    </template>
                    <template v-else>
                      <van-field v-model="dirItem[child.key]" input-align="left" :type="child.inputType || 'number'"
                        autosize></van-field>
                    </template>
                  </td>
                </template>
              </tr>
            </template>
            <tr class="center">
              <th :colspan="2">周围建筑物</th>
              <td :colspan="2 + (headerList.length > 2 ? headerList.length - 3 : 0)">
                <van-checkbox-group v-model="baseMsg.aroundBuilding" shape="square" direction="horizontal">
                  <van-checkbox :name="around.key" icon-size="18px" v-for="around in AROUND_BUILDING"
                    :label-disabled="true">
                    <template v-if="around.showInput && baseMsg.aroundBuilding.includes(around.key)">
                      <van-field :label="around.value" v-model="baseMsg.aroundBuildingExt" input-align="left">
                      </van-field>
                    </template>
                    <template v-else>
                      {{around.value}}
                    </template>
                  </van-checkbox>
                </van-checkbox-group>
              </td>
            </tr>
            <tr>
              <th :colspan="2">拍照</th>
              <td :colspan="2 + (headerList.length > 2 ? headerList.length - 3 : 0)">
                用水印相机拍照留存每个勘察路口的各个方向车道、电警杆、信号灯杆，水印要标注清楚路口、方向。
              </td>
            </tr>
          </table>
        </div>
      </div>
    </template>
    <!-- 预览界面 -->
    <template v-if="activeTabbar === 2">
      <div class="road-survey-view">
        <div class="road-survey-view-content">
          <table style="width: 100%;" :style="scaleTable">
            <tr class="center">
              <th :colspan="4 + (headerList.length > 2 ? headerList.length - 3 : 0)">路口现场勘察记录表</th>
            </tr>
            <tr class="center">
              <th>勘查时间</th>
              <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">{{baseMsg.time}}</td>
              <th>记录人</th>
              <td>{{baseMsg.user}}</td>
            </tr>
            <tr class="center">
              <th>路口名称</th>
              <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">
                {{baseMsg.roadName}}</td>
              <th>路口经纬度</th>
              <td>{{baseMsg.roadPosition}}</td>
            </tr>
            <tr class="center">
              <th>点位形状</th>
              <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">
                {{findValueByKey(baseMsg.roadShape, ROAD_SHAPE)}}
                <template>
                  {{baseMsg.roadShapeExt}}
                </template>
              </td>
              <th>点位属性</th>
              <td>
                {{findValueByKey(baseMsg.dotType, DOT_TYPE)}}
              </td>
            </tr>
            <tr class="center">
              <th>信号机品牌</th>
              <td :colspan="3 + (headerList.length > 2 ? headerList.length - 3 : 0)">
                {{findValueByKey(baseMsg.signalType, SIGNAL_TYPE)}}
                <template>
                  {{baseMsg.signalTypeExt}}
                </template>
              </td>
            </tr>
            <tr v-if="headerList.length > 1">
              <th colspan="2">方向</th>
              <template v-for="item in headerList.slice(1)">
                <th>{{item.value}}</th>
              </template>
            </tr>
            <template v-for="item in DIRECTION_CONFIG">
              <tr v-for="(child, index) in item.child">
                <th :rowspan="item.child.length" v-if="index === 0" :colSpan="item.child.length === 1 ? 2 : 1">
                  {{item.value}}</th>
                <th v-if="item.child.length !== 1">{{child.value}}</th>
                <template v-for="dirItem in directionMsg">
                  <td>
                    <template v-if="child.key==='motorwayNumber'">
                      <template v-for="(road, index) in dirItem.motorwayList">
                        <div class="common-title">
                          车道{{index + 1}}
                        </div>
                        <div>
                          宽度: {{road.width}}米
                        </div>
                        <div class="direction-img-content">
                          <template v-for="item in DIRECTION_IMAGE" :key="item.key">
                            <div v-if="road.direction.includes(item.key)"
                              :class="['direction-img-item direction-img-table-item', {'active': road.direction.includes(item.key)}]">
                              <img
                                :src="`./images/${road.direction.includes(item.key) ? 'active-' : ''}${item.value}.png`" />
                            </div>
                          </template>
                        </div>
                      </template>
                    </template>
                    <template v-else-if="child.type===CONTENT_TYPE.RADIO">
                      <div>
                        {{findValueByKey(dirItem[child.key], child.option)}}
                        {{dirItem[child.key + 'Ext']}}
                      </div>
                    </template>
                    <template v-else-if="child.type===CONTENT_TYPE.CHECKBOX">
                      <span v-for="(item, index) in dirItem[child.key]">
                        {{findValueByKey(item, child.option)}}
                        <template v-if="item === 'other'">
                          {{dirItem[child.key + 'Ext']}}
                        </template>
                        <span v-if="index < dirItem[child.key].length - 1">,</span>
                      </span>
                    </template>
                    <template v-else>
                      <van-field v-model="dirItem[child.key]" readonly input-align="left"
                        :type="child.inputType || 'number'" autosize></van-field>
                    </template>
                  </td>
                </template>
              </tr>
            </template>
            <tr class="center">
              <th :colspan="2">周围建筑物</th>
              <td :colspan="2 + (headerList.length > 2 ? headerList.length - 3 : 0)">
                <span v-for="(item, index) in baseMsg.aroundBuilding">
                  {{findValueByKey(item, AROUND_BUILDING)}}
                  <span v-if="item === 'other'">
                    {{baseMsg.aroundBuildingExt}}
                  </span>
                  <span v-if="index < baseMsg.aroundBuilding.length - 1">,</span>
                </span>
              </td>
            </tr>
            <tr>
              <th :colspan="2">拍照</th>
              <td :colspan="2 + (headerList.length > 2 ? headerList.length - 3 : 0)">
                用水印相机拍照留存每个勘察路口的各个方向车道、电警杆、信号灯杆，水印要标注清楚路口、方向。
              </td>
            </tr>
          </table>
        </div>
      </div>
    </template>
    <!-- 设置界面 -->
    <template v-if="activeTabbar === 3">
      <div style="padding-top: 16px">
        <van-cell-group inset>
          <van-field label="导出" title-class="cell-title" readonly>
            <template #button>
              <van-button size="small" @click="handleExportMsg">数据导出</van-button>
            </template>
          </van-field>
          <!-- <van-field label="保存" title-class="cell-title" readonly>
            <template #button>
              <van-button size="small" @click="handleSaveMsg">数据保存</van-button>
            </template>
          </van-field> -->
          <van-field label="清理" title-class="cell-title" readonly>
            <template #button>
              <van-button size="small" @click="handleClearCatch">清除缓存</van-button>
            </template>
          </van-field>
          <van-field label="方向" title-class="cell-title" readonly>
            <template #button>
              <van-button size="small" @click="handleRemoveDirection" :disabled="headerList.length <= 1">删除方向</van-button>
            </template>
          </van-field>
        </van-cell-group>
      </div>
    </template>
    <div class="road-survey-bottom">
      <van-tabbar v-model="activeTabbar">
        <van-tabbar-item icon="home-o">信息录入</van-tabbar-item>
        <van-tabbar-item icon="label-o">核对</van-tabbar-item>
        <van-tabbar-item icon="search">预览</van-tabbar-item>
        <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 添加方向 -->
    <van-popup v-model:show="showAddPicker" destroy-on-close round position="bottom">
      <van-picker :model-value="pickerDirectionValue" :columns="canUseDirection"
        :columns-field-names="{text: 'value', value: 'key'}" title="添加方向" @cancel="showAddPicker = false"
        @confirm="handleSureAdd" />
    </van-popup>

    <!-- 删除方向 -->
    <van-popup v-model:show="showRemovePicker" destroy-on-close round position="bottom">
      <van-picker :model-value="pickerDirectionValue" :columns="headerList.slice(1)"
        :columns-field-names="{text: 'value', value: 'key'}" title="删除方向" @cancel="showRemovePicker = false"
        @confirm="handleSureRemove" />
    </van-popup>
    <van-floating-bubble v-model:offset="offset" axis="xy" icon="add" magnetic="x" @click="handleAddDirection"
      v-if="activeTabbar === 0" />
  </div>
</body>
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<script src="./js/methods.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=e16b1f7b2145b064b8658ebbe7b3ad62"></script>
<script src="./config.js"></script>
<script>
  const { createApp, ref, nextTick, reactive, onMounted, onUnmounted, computed, watch } = Vue
  const app = Vue.createApp({
    setup() {
      // 当前激活栏的tab
      const activeTab = ref(0)

      // 当前激活栏的tabbar
      const activeTabbar = ref(0)

      const baseHeader = { key: 'base', value: '基础信息' }
      // 顶部选择器
      const headerList = ref([baseHeader])

      const base = {
        time: formatDate(new Date()),
        user: '',
        roadName: '',
        roadPosition: '',
        roadShape: ROAD_SHAPE[0].key,
        roadShapeExt: '',
        dotType: DOT_TYPE[0].key,
        signalType: SIGNAL_TYPE[0].key,
        signalTypeExt: '',
        aroundBuilding: [],
        aroundBuildingExt: ''
      }
      // 基础信息
      const baseMsg = ref(JSON.parse(JSON.stringify(base)))

      // 车道的子项
      const motorwayItem = {
        width: 3.5,
        direction: [2]
      }

      // 和方向相关的信息
      const directionItem = {
        current: 0,
        motorwayNumber: 3,
        motorwayFlow: '',
        motorwayShape: LANE_SHAPE[0].key,
        motorwayList: [
          JSON.parse(JSON.stringify(motorwayItem)),
          JSON.parse(JSON.stringify(motorwayItem)),
          JSON.parse(JSON.stringify(motorwayItem))],
        signalStemNoHas: HAS_OR_NONE[0].key,
        signalStemType: SIGNAL_STEM_TYPE[0].key,
        signalStemHeight: SIGNAL_STEM_HEIGHT[0].key,
        motorVehicleLampDiam: VEHICLE_LAMP_DIAM[1].key,
        policePoleHasNo: HAS_OR_NONE[0].key,
        // policePoleLength: POLICE_POLE_LENGTH[0].key,
        electricPoliceBrand: POLICE_BRAND[0].key,
        reverseCheckpointBrand: POLICE_BRAND[0].key,
        reverseCheckpoint: POLICE_BRAND[0].key,
        ambientConditionScreen: [ SCREEN_TYPE[0].key ],
        otherLaneType: [OTHER_LANE_TYPE[0].key]
      }

      // 当前方向的绑定的值信息
      const currentDirItem = computed(() => {
        return directionMsg.value[activeTab.value - 1]
      })

      // 当前方向的基础展示信息
      const currentDirChild = computed(() => {
        return DIRECTION_CONFIG[currentDirItem.value.current]
      })

      // 获取当前可以添加的方向，已经被添加的不可二次添加
      const canUseDirection = computed(() => {
        const headerListMap = headerList.value.map(item => item.key)
        const list = JSON.parse(JSON.stringify(DIRECTION_OPTIONS))
        list.forEach(item => {
          item.disabled = headerListMap.includes(item.key)
        })
        return list
      })

      // 方向信息的全量
      const directionMsg = ref([])

      /**
       * 修改当前的转向信息
       * @item  当前点击的数据
       * @road 维护的数据
       */
      const handleChangeDirection = (item, road) => {
        const result = road.direction.findIndex(roadItem => roadItem === item.key)
        if (result > -1) {
          road.direction.splice(result, 1)
          return
        }
        road.direction.push(item.key)
      }

      /**
       * 点击增加或者减少车道
       * @number 1 增加 -1 减少
       */
      const handleChangeMotNumber = (number) => {
        if (number > 0) {
          currentDirItem.value.motorwayList.push(JSON.parse(JSON.stringify(motorwayItem)))
        }
        else {
          currentDirItem.value.motorwayList.pop()
        }
      }

      // 展示弹窗
      const showAddPicker = ref(false)
      // 点击添加的按钮
      const handleAddDirection = () => {
        showAddPicker.value = true
      }

      const pickerDirectionValue = ref()

      const timer = ref(null)
      // 确认添加
      const handleSureAdd = (data) => {
        if (data.selectedOptions.length) {
          headerList.value.push({ key: data.selectedOptions[0].key, value: data.selectedOptions[0].value })
          directionMsg.value.push(JSON.parse(JSON.stringify(directionItem)))
        }
        showAddPicker.value = false
      }

      const handleGetTime = () => {
        baseMsg.value.time = formatDate(new Date())
      }

      const positionLoading = ref(false)
      // 处理经纬度
      const getCurrentLocation = async (flag = false) => {
        positionLoading.value = true
        // 初始化地图
        const map = new AMap.Map('container', {
          zoom: 15,  // 初始缩放级别
          resizeEnable: true
        });

        // 加载定位插件
        AMap.plugin('AMap.Geolocation', function () {
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,   // 是否使用高精度定位
            timeout: 10000,             // 超时时间(毫秒)
            buttonPosition: 'RB',       // 定位按钮位置
            zoomToAccuracy: true        // 定位成功后调整视野到定位精度范围
          });

          // 将定位控件添加到地图
          map.addControl(geolocation);

          // 注册定位成功事件
          geolocation.on('complete', function (data) {
            vant.showToast('精准定位成功')
            // vant.showDialog({
            //   title: '精准定位信息',
            //   message: JSON.stringify(data)
            // })
            positionLoading.value = false
            baseMsg.value.roadPosition = data.position.lng.toFixed(6) + ', ' + data.position.lat.toFixed(6)
          });

          // 注册定位失败事件
          geolocation.on('error', function (data) {
            // 定位失败后尝试IP定位
            fallbackToIPLocation();
          });

          // 自动触发定位
          geolocation.getCurrentPosition();
        });
      }

      // IP定位回退方案
      function fallbackToIPLocation() {
        fetch(`https://restapi.amap.com/v3/ip?key=e16b1f7b2145b064b8658ebbe7b3ad62`)
          .then(response => response.json())
          .then(data => {
            if (data.status === '1') {
              const rect = data.rectangle.split(';');
              const [p1, p2] = rect.map(p => p.split(',').map(Number));
              const center = {
                lng: (p1[0] + p2[0]) / 2,
                lat: (p1[1] + p2[1]) / 2
              };
              // vant.showDialog({
              //   title: '模糊定位信息',
              //   message: JSON.stringify(data)
              // })
              vant.showDialog({
                title: '提示',
                message: '当前定位为大致位置，请确认是否有误'
              })
              baseMsg.value.roadPosition = center.lng.toFixed(6) + ', ' + center.lat.toFixed(6)
            }
          }).finally(() => {
            positionLoading.value = false
          })
      }

      // local存储
      const setLocalMsg = () => {
        setLocal('baseMsg', baseMsg.value)
        setLocal('directionMsg', directionMsg.value)
        setLocal('headerList', headerList.value)
      }

      // local获取
      const getLocalMsg = () => {
        baseMsg.value = getLocal('baseMsg') || JSON.parse(JSON.stringify(base))
        directionMsg.value = getLocal('directionMsg') || []
        headerList.value = getLocal('headerList') || [baseHeader]
      }

      // 清除缓存
      const handleClearCatch = () => {
        vant.showConfirmDialog({
          title: '提示',
          message: '确定清除当前的所有缓存信息吗？清除后不可恢复',
        }).then(() => {
          clearLocal()
          vant.showToast('清除成功')
          getLocalMsg()
        }).catch(() => {

        })
      }

      // 内容导出
      const handleExportMsg = () => {
        const params = {
          baseMsg: baseMsg.value,
          directionMsg: directionMsg.value,
          headerList: headerList.value
        }

        const textarea = document.createElement('textarea');
        textarea.setAttribute('readonly', 'readonly');
        textarea.value = JSON.stringify(params)
        document.body.appendChild(textarea);
        textarea.select();
        if (document.execCommand) {
          document.execCommand('copy');
          vant.showToast('内容复制成功，可将内容粘贴至微信');
        }
        document.body.removeChild(textarea);
      }

      // 数据保存
      const handleSaveMsg = () => {
        const params = {
          baseMsg: baseMsg.value,
          directionMsg: directionMsg.value,
          headerList: headerList.value
        }
        console.log('params', params);
        fetch(`${apiUrl}/saveData`, {
          method: 'POST',
          body: JSON.stringify(params),
          headers: {
            'content-type': 'application/json'
          }
        })
      }

      // 表格缩放
      const scaleTable = computed(() => {
        const scale = parseFloat(window.innerWidth) / 800 - 0.01
        return `transform: scale(${scale}); transform-origin: top left; overflow: auto`
      })

      const showRemovePicker = ref(false)
      // 删除方向信息
      const handleRemoveDirection = () => {
        showRemovePicker.value = true
      }

      // 删除指定方向
      const handleSureRemove = (data) => {
        if (data.selectedOptions.length) {
          vant.showConfirmDialog({
            title: '提示',
            message: `确定删除方向${data.selectedOptions[0].value}吗?删除后无法恢复`,
          }).then(() => {
            const index = data.selectedIndexes[0]
            headerList.value.splice(index + 1, 1)
            directionMsg.value.splice(index - 1, 1)
            showRemovePicker.value = false
            vant.showToast('删除成功')
            if (activeTab.value > directionMsg.value.length) {
              activeTab.value = directionMsg.value.length
            }
          }).catch(() => {

          })
        }
      }

      const offset = ref({ x: window.innerWidth - 70, y: window.innerHeight - 120 })

      onMounted(async () => {
        // 每10秒自动更新缓存
        timer.value = setInterval(() => {
          setLocalMsg()
        }, 5 * 1000)
        getLocalMsg()
      })

      onUnmounted(() => {
        timer.value && clearInterval(timer.value)
      })

      return {
        // 外部导入的内容导出
        ROAD_SHAPE, DOT_TYPE, SIGNAL_TYPE, AROUND_BUILDING, DIRECTION_CONFIG, CONTENT_TYPE,
        DIRECTION_IMAGE,
        // 基础定义的内容导出
        headerList, baseMsg, activeTab, directionMsg, activeTabbar, showAddPicker, pickerDirectionValue,
        scaleTable, showRemovePicker, offset, positionLoading, findValueByKey,
        // computed计算属性导出
        currentDirChild, currentDirItem, canUseDirection,
        // 方法导出
        handleChangeDirection, handleChangeMotNumber, handleAddDirection, handleSureAdd, handleClearCatch,
        handleExportMsg, handleGetTime, handleRemoveDirection, handleSureRemove, getCurrentLocation,
        handleSaveMsg
      }
    }
  })
  app.use(vant);
  app.use(vant.Lazyload);
  app.mount("#app");
</script>

</html>